import React, { useReducer } from 'react'
const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD':
      return { ...state, count: state.count + action.payload }
    case 'REDUCE':
      return { ...state, count: state.count - action.payload }
    default:
      return state
  }
}
function Third () {
  const [ state, dispatch ] = useReducer(reducer, { count: 10 })
  return (
    <div>
      <h1>Third</h1>
      <button onClick = { () => {
        dispatch({
          type: 'ADD',
          payload: 5
        })
      }}>+</button>
      { state.count }
      <button onClick = { () => {
        dispatch({
          type: 'REDUCE',
          payload: 5
        })
      }}>-</button>
    </div>
  )
}
function Second () {
  const [ state, dispatch ] = useReducer(reducer, { count: 10 })
  return (
    <div>
      <h1>second</h1>
      <button onClick = { () => {
        dispatch({
          type: 'ADD',
          payload: 5
        })
      }}>+</button>
      { state.count }
      <button onClick = { () => {
        dispatch({
          type: 'REDUCE',
          payload: 5
        })
      }}>-</button>
    </div>
  )
}
function App() {
  return (
    <div>
      <Second />
      <hr />
      <Third />
    </div>
  )
}

export default App
